<template>
  <div class="home">
    <el-container class="home_container">
      <!-- 头部 -->
      <el-header class="home_header">
        <div class="header_div">
          <img src="../assets/logo2.jpg" alt="" />
          <div>
            <el-button>消息</el-button>
            <el-button>设置</el-button>
            <el-button @click="logout()"
              >安全退出<i class="el-icon-caret-bottom el-icon--right"></i
            ></el-button>
          </div>
        </div>
      </el-header>
      <el-container>
        <!-- 左侧部分-->
        <el-aside width="200px">
          <p class="uname">当前用户：{{ uname }}</p>
          <!-- 左侧导航 -->
          <el-menu
            unique-opened
            router
            :default-active="selectPath"
            class="el-menu-vertical-demo"
            background-color="#FFFFFF"
            text-color="#154648"
            active-text-color="#1897D8"
          >
            <!-- 一级菜单 -->
            <el-submenu
              :index="value.path"
              v-for="(value, index) in menusList"
              :key="value.id"
            >
              <template slot="title">
                <i :class="icons[index].iname"></i>
                <span class="title_name">{{ value.authName }}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item
                :index="v.path"
                @click="select(v.path)"
                v-for="v in value.children"
                :key="v.id"
                >{{ v.authName }}</el-menu-item
              >
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 中间部分 -->
        <el-main>

          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      uname: "",
      menusList: [],
      selectPath: "",
      icons: [
        { iname: "iconfont icon-yonghuguanli" },
        { iname: "iconfont icon-quanxianguanli" },
        { iname: "iconfont icon-shangpinguanli" },
        { iname: "iconfont icon-dingdanguanli" },
        { iname: "iconfont icon-shujuguanli" },
      ],
    };
  },
  methods: {
    async getMenus() {
      // 获取左侧导航列表
      var p1 = await this.axios.get("menus");
      this.menusList = p1.data.data;
    },
    // 退出登录
    logout() {
      sessionStorage.removeItem("token");
      this.$router.push("/login");
    },
    // 设置二级菜单选中状态
    select(path) {
      this.selectPath = path;
      // 将路径存储在sessionstorage中
      sessionStorage.setItem("selectPath", path);
    },
  },
  mounted() {
    // 获取默认路径
    this.selectPath = sessionStorage.getItem("selectPath");
    //  获取当前用户
    this.uname = sessionStorage.getItem("uname");
    this.getMenus();
  },
};
</script>
<style lang="scss">
.home {
  height: 100%;
  .home_container {
    height: 100%;
    .home_header {
      height: 80px !important;
    }
    .header_div {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 10px;
      align-items: center;
      button {
        background: #ddd;
        color: #777;
        width: 110px;
      }
    }
    .uname {
      line-height: 0;
      color: #7e7e7e;
    }
    .title_name {
      margin-left: 10px;
    }
  }
}
.el-header {
  background-color: #1897d8;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #eeeeee;
  color: #333;
  text-align: center;
  line-height: 200px;
  width: 350px !important;
}
.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  // line-height: 160px;
}
</style>
